<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <el-form ref="book" :model="book" label-width="80px">
            <el-form-item label="书名">
                <el-input v-model="book.f_title"></el-input>
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="book.f_author"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="book.f_price"></el-input>
            </el-form-item>

            <div><el-form-item label="封面">
                <input type="file"  @change="onChange">
            </el-form-item></div>
                

            <el-form-item label="类型">
            <template>
                <el-select v-model="book.f_type" placeholder="请选择图书类型">
                  <el-option label="小说" value="小说"></el-option>
                  <el-option label="教材" value="教材"></el-option>
                  <el-option label="散文" value="散文"></el-option>
                  <el-option label="诗歌" value="诗歌"></el-option>
                </el-select>
              </template>
           </el-form-item>

           <div><el-button type="primary" @click="onClick">确定<i class="el-icon-upload el-icon--right">

           </i></el-button></div>
           
        
        
    </div>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>

        let vm=new Vue({
            el:'#app',
            data:{
                types:['小说','散文','教材','诗歌'],
                img:null,
                book:{f_id:0,f_title:'',f_author:'',f_price:0,f_image:''},
                
        
        },
                
      
    
            methods:{
                onChange(e){
                    this.img=e.target.files[0]
                let _this=this

                let formData =new FormData()
                formData.append('image',this.img)

                axios.post('http://localhost:44355/Book/upload',formData)
                .then(function (rs)
                {
                    _this.book.f_image=rs.data.image
                    console.log("上传图片ok:"+rs.data.Data.image);
                })
                },

                 onClick(){
                    let _this=this
                    axios.post('http://localhost:44355/Book/add',_this.book)
                    .then(function(rs){
                        console.log(rs.data);
                    })
                 }
                
            },
        })
    </script>
    
</body>
</html>